<template>
	<view style="background-color: #f3f3f3; overflow: auto; height: 100vh">
		<u-notice-bar :text="$store.state.pushBoxText" mode="closable" v-show="$store.state.pushBoxText" @close="pushBoxClose"></u-notice-bar>
		<u-empty v-if="!menu.length" text=" " mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png"></u-empty>
		<view v-if="menu.length" class="menu-container">
			<view class="menu-left">
				<view @click="itemClick(item, index)" class="menu-item" :class="{ 'menu-item-select': selectIndex === index }" :key="index" v-for="(item, index) in getMenu()">
					{{ item.name }}
				</view>
				<view style="height: 52px"></view>
			</view>
			<view class="menu-right">
				<!-- <view @click="menuClick(item, index)" class="menu-right-item" v-for="(item, index) in rightData" :key="index">
					<view class="text">
						{{ item.name }}
					</view>
					<view class="r-icon">
						<u-icon name="arrow-right" color="rgb(221 221 208)" size="16"></u-icon>
					</view>
				</view> -->
				<view class="box">
					<view class="box-item" v-for="(item, index) in rightData" :key="item.id" @click="menuClick(item, index)">
						<view class="box-item-right">
							<view class="image-bg" :style="{ background: 'linear-gradient(to top right,#2bb426,#4bc5c1,#00d5fa)' }">
								<span class="iconfont" :class="item.icon ? item.icon : 'icon-moren'"></span>
							</view>
						</view>
						<view class="box-item-left">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
			<!-- 	<view class="box">
				
			</view> -->
		</view>
		<u-modal :show="titelShow" :title="titel" :content="titelContent" @confirm="confirmFn"></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			titelShow: false,
			titel: '',
			titelContent: '',
			selectIndex: 0,
			menu: [],
			rightData: [],
			menuTest: [],
			Ip:'',
		};
	},
	watch: {
		menu: {
			deep: true,
			immediate: true,
			handler(newVal) {
				console.log('newVal', newVal);
				const list = newVal.filter((item) => item.parentId == '');
				console.log('list', list);
				this.menuTest = list;
				console.log('随机颜色', this.getRandomColor());
			}
		}
	},
	onLoad() {
		this.getLoginInofo();
		let menu = this.$store.getters.getMenu();
		this.Ip = this.$store.state.IP; // 获取当前域名
		if (menu.length) {
			console.log('menu', menu);
			return (this.menu = menu);
		}
		this.http.get('api/menu/getTreeMenu', {}, false).then((result) => {
			this.menu = result.menu ? result.menu : result; //.filter(x=>{return x.enable==1||x.enable===undefined});
			if (this.menu.length) {
				this.itemClick(this.getMenu()[0], 0);
			}

			this.$store.commit('setPermission', JSON.parse(JSON.stringify(this.menu)));
		});
	},
	onShow() {
		this.getLoginInofo();
	},
	methods: {
		getRandomColor() {
			var color = 'rgb(';
			// var color ="";
			for (var i = 0; i < 3; i++) {
				color += Math.floor(Math.random() * 256) + ', ';
			}
			color = color.slice(0, -2) + ')';
			// color = color.slice(0, -2);
			return color;
		},
		menuTestFn(obj) {
			console.log('obj', obj);
			const list = this.menu.filter((item) => item.parentId == obj.id);
			console.log('list', list);
		},
		toJSON() {},
		confirmFn() {
			this.versionsShow = false;
			this.$store.commit('clearUserInfo');
			// #ifdef APP-PLUS
			    plus.runtime.openURL(this.Ip+"api/AppUpdate/appup");
			// #endif
			// uni.reLaunch({
			// 	url: '/pages/login/login'
			// });
		},
		getLoginInofo() {
			const userName = uni.getStorageSync('userName');
			const appVersion = uni.getSystemInfoSync().appVersion;
			const url = 'api/Appversion/version?version=' + appVersion + '&UserName=' + userName;
			// console.log("url",url)
			try {
				this.http.post(url).then((x) => {
					// this.popupShow = !x;
					// console.log("x",x)
					this.titelShow = !x;
					this.titel = '提示';
					this.titelContent = '当前版本或该用户账号不可用，请去下载新版本。';
					if (x) {
						uni.showTabBar();
					} else {
						uni.hideTabBar();
					}
				});
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		},
		getMenu() {
			return this.menu.filter((c) => {
				return !c.parentId;
			});
		},
		itemClick(item, index) {
			this.selectIndex = index;
			this.rightData = this.menu.filter((x) => {
				return x.parentId == item.id && (x.enable == 1 || x.enable === undefined);
			});
		},
		menuClick(item, index) {
			let path = item.path || item.url;
			if (path) {
				if (path[0] != '/') {
					path = '/' + path;
				}
				uni.navigateTo({
					url: path
				});
			}
		},
		pushBoxClose() {
			console.log(1);
			this.$store.commit('removePushBoxText', null);
		}
	}
};
</script>

<style lang="less" scoped>
.tubiao {
	color: #00698f;
	font-size: 12px;
}
.menu-container {
	display: flex;
	height: 100%;
	overflow: hidden;
	.menu-left {
		overflow: scroll;
		width: 200rpx;
		// background-color: #f7f8fa;
		background-color: #fff;
		border-right: 1px solid #f7f8fa;
		height: 100%;

		.menu-item {
			position: relative;
			display: block;
			box-sizing: border-box;
			padding: 34rpx 16rpx;
			overflow: hidden;
			// color: #323233;
			color: #666666;
			font-size: 28rpx;
			line-height: 36rpx;
			// background-color: #f7f8fa;
			background-color: #fff;
			user-select: none;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.menu-item-select {
			// background: white;
			// background:#00c3f3;
			color: #ebfdff;
			font-size: 32rpx;
			text-shadow: 3rpx 3rpx 0px #00698f;
			// box-shadow: 0px 0px 10rpx #00959d inset;
			border-radius: 10rpx;
			background: linear-gradient(to top right, #fff, #c4f6ff, #fff);
			animation: bg 1s;
		}

		// .menu-item-select:before {
		// 	position: absolute;
		// 	top: 50%;
		// 	left: 0;
		// 	width: 8rpx;
		// 	height: 34rpx;
		// 	background-color: #007ef3;
		// 	-webkit-transform: translateY(-50%);
		// 	transform: translateY(-50%);
		// 	content: '';
		// }
	}

	.menu-right {
		overflow: scroll;
		flex: 1;
		width: 0;
		margin-bottom: 53px;

		// display: flex;
		.menu-right-item {
			padding: 30rpx 30rpx 30rpx 50rpx;
			color: #727272;
			font-size: 28rpx;
			border-bottom: 1px solid #f3f3f3;
			display: flex;

			.text {
				flex: 1;
			}

			.r-icon {
				width: 30rpx;
			}
		}
	}
}
// ----------------
@keyframes bg {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	padding: 0 20rpx;
	// padding-bottom: 60px;
	font-size: 12px;
}
.box-item {
	display: flex;
	justify-content: center;
	flex-direction: column;
	width: 48%;
	height: 150rpx;
	background-color: #fafafa;
	border-radius: 5px;
	margin-top: 20rpx;
	padding: 10rpx;
	box-sizing: border-box;
	box-shadow: -1px -1px 8px #999;
}

.box-item-left {
	display: flex;
	justify-content: center;
	align-items: center;
	// // width: 70%;
	flex: 1;
	text-align: center;
	font-size: 28rpx;
	color: #007959;
}
.box-item-right {
	flex: 1;
	display: flex;
	justify-content: center;
	.image-bg {
		display: flex;
		justify-content: center;
		align-items: center;
		// background: linear-gradient(to right, rgb(255, 250, 232), rgb(211, 227, 253));
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
}
</style>
